<template>
	<nav class="topbar">
		<div class="container">
			<div class="topbar-swiper">
				<div class="topbar-notice">
					<i class="iconfont icon-sound"></i>
					<span>公告：</span>
				</div>
				<swiper :options="swiperOption">
					<swiper-slide v-for="(item, index) in news" :key="index">
						<router-link :to="{ name: 'news', params: {id: item.id}}">{{item.title}}</router-link>
					</swiper-slide>
				</swiper>

			</div>
			<el-button @click="login"><i class="iconfont icon-audio"></i>Login</el-button>
			<div class="user" v-if="isLogin">
				<div>{{user.name}}</div>
			</div>
			<div v-else>
				<router-link to="/">登录</router-link>
				<router-link to="/about">注册</router-link>
			</div>
		</div>
	</nav>
</template>

<script>

export default {
	name: 'TopBar',
	data() {
		return {
			swiperOption: {
				direction: 'vertical',
				loop: true,
				autoplay: {
					delay: 4000,
					disableOnInteraction: false,
				}
			},
			news: [{
				id: 1,
				title: '新闻标题1'
			}, {
				id: 2,
				title: '新闻标题2'
			}, {
				id: 3,
				title: '新闻标题3'
			}]
		}
	},
	computed: {
		user() {
			return this.$store.state.user;
		},
		isLogin() {
			return this.$store.state.isLogin;
		}
	},
	methods: {
		login() {
			this.$store.dispatch('login');
		}
	},
}
</script>

<style scoped lang="scss">
$height: 50px;
.topbar {
  position: relative;
  height: $height;
  line-height: $height;
}
.topbar-swiper {
  position: relative;
  height: $height;
  width: 100%;
  padding-left: 100px;
}
.topbar-notice {
  position: absolute;
  left: 0;
  top: 0;
  height: $height;
  display: flex;
  align-items: center;
}
.swiper-container {
  height: 100%;
  width: 100%;
}
</style>